<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>河南青少年机器人竞赛</title>
	<link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/mui.picker.css" rel="stylesheet" />
	<link href="css/mui.poppicker.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">单位管理</h1>
</header>
<div class="mui-content">
	<form id="company-form">
		<div class="mui-subtitle"  style="text-indent: 15px;margin-top: 10px;;">
			单位信息
		</div>
		<div class="mui-card">
			<!--<div class="mui-card-header">-->
			<!--<div class="mui-media-body">-->
			<!--单位名称-->
			<!--<p>河南省郑州市郑东新区</p>-->
			<!--</div>-->
			<!--</div>-->
			<div class="mui-input-row">
				<label>单位名称:</label>
				<input name="zhiZhao" type="text" class="mui-input-clear" placeholder="请输入单位名称">
			</div>
			<div class="mui-input-row">
				<label>单位简称:</label>
				<input name="name" type="text" class="mui-input-clear" placeholder="2~5个汉字">
			</div>
			<div class="mui-input-row">
				<label>地区:</label>
				<span id="area" style="line-height: 40px;font-size: 17px;">点击选择地区</span>
				<input id="provinceId" type="hidden" name="provinceId">
				<input id="cityId" type="hidden" name="cityId">
				<input id="areaId" type="hidden" name="areaId">
			</div>
			<div class="mui-input-row">
				<label>姓名:</label>
				<input name="contactPerson" type="text" class="mui-input-clear" placeholder="请输入联系人姓名">
			</div>
			<div class="mui-input-row">
				<label>电话:</label>
				<input name="contactTel" type="text" class="mui-input-clear" placeholder="请输入联系人电话">
			</div>
		</div>
		<div class="mui-subtitle" style="text-indent: 15px;">
			单位类型
		</div>
		<div class="mui-card company-type">
			<div class="mui-input-row mui-radio">
				<label>学校</label>
				<input name="companyType" type="radio" value="XUEXIAO" checked>
			</div>
			<div class="mui-input-row mui-radio">
				<label>机构</label>
				<input name="companyType" type="radio" value="JIGOU">
			</div>
			<div class="mui-card-footer" style="color:#fb6f73;">单位类型请根据实际选择，若审核时候发现与实际不符将封禁帐号。</div>
		</div>
		<div class="mui-subtitle invoice-info" style="text-indent: 15px;">
			发票信息
		</div>
		<div class="mui-card invoice-info">
			<div class="mui-input-row">
				<label>抬头:</label>
				<input name="invoiceHeader" type="text" class="mui-input-clear" placeholder="请输入发票抬头">
			</div>
			<div class="mui-input-row">
				<label>税号:</label>
				<input name="invoiceTaxNo" type="text" class="mui-input-clear" placeholder="请输入税号">
			</div>
		</div>
		<input type="hidden" name="id">
	</form>
	<div class="mui-content-padded">
		<button id="comp-form" class="mui-btn mui-btn-block mui-btn-primary" data-loading-text="提交中">提交</button>
	</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/common.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data-3.js"></script>
<script type="text/javascript">

	mui.ready(function(){

		$.ajax({
			type: "post",
			url: "../company/front/",
			// data: {"parentAreaId":0},
			dataType: "json",
			success: function(data){
				$("input[name=zhiZhao]").val(data.zhiZhao);
				$("input[name=name]").val(data.name);
				$("input[name=areaId]").val(data.areaId);
				$("input[name=cityId]").val(data.cityId);
				$("input[name=contactPerson]").val(data.contactPerson);
				$("input[name=contactTel]").val(data.contactTel);
				$("input[name=invoiceHeader]").val(data.invoiceHeader);
				$("input[name=invoiceTaxNo]").val(data.invoiceTaxNo);
				$("input[name=id]").val(data.id);
				if(data.location!=null){
					$("#area").text(data.location);
				}
				if(data.companyType!=null){
					$("input:radio[name=companyType][value="+data.companyType+"]").attr("checked",true);
					if(data.companyTyp=="JIGOU"){
						$(".invoice-info").hide();
						$(".invoice-info").find("input").val("");
					}else{
						$(".invoice-info").show();
					}
				}


			},
			error:function(){
				mui.toast('获取单位信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
			}
		});

	});
	mui(".mui-content-padded").on('tap','#comp-form',function(){
		var flag=Chinasimple($("input[name=name]").val());
		if(!flag){
			mui.toast('单位简称为2~5个汉字，请重新填写',{ duration:'2000', type:'div' });
		}
		if($.trim($("input[name=zhiZhao]").val())==""||$.trim($("input[name=name]").val())==""||$.trim($("input[name=provinceId]").val())==""||$.trim($("input[name=cityId]").val())==""||$.trim($("input[name=areaId]").val())==""){
			mui.toast('单位名称，单位简称，地区为必填项',{ duration:'2000', type:'div' });
			flag=false;
		}
		if(flag){
			mui(this).button('loading');
			var that=this;
			$.ajax({
				type: "post",
				url: "../company/",
				data: JSON.stringify(getFormData($('#company-form'))),
				dataType: "json",
				contentType: 'application/json',
				success: function(data){
					console.log(data);
					if(data.success){
						mui(that).button('reset');
					}

				},
				error:function(){
					mui.toast('添加单位信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
				}
			});
		}

	});
	function Chinasimple(str) {
		var strs=str.replace(/(^\s+)|(\s+$)/g, "");//去除前后的空格
		if (!strs.match(/^[\u4e00-\u9fa5]{2,5}$/)) {
			return false;
		}
		return true;
	}
	$("input[name=companyType]").click(function(){
		var type=$(this).val();
		if(type=="JIGOU"){
			$(".invoice-info").hide();
			$(".invoice-info").find("input").val("");
		}else{
			$(".invoice-info").show();
		}
	});
	$("#back").click(function(){
		mui.openWindow({
			url:'index.html'
		});
	});

	(function($, doc) {
		$.ready(function() {
			/**
			 * 获取对象属性的值
			 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
			 * @param {Object} obj 对象
			 * @param {String} param 属性名
			 */
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};

			var cityPicker3 = new $.PopPicker({
				layer: 3
			});
			cityPicker3.setData(cityData3);
			var showCityPickerButton = doc.getElementById('area');
			var cityResult3 = doc.getElementById('area');
			showCityPickerButton.addEventListener('tap', function(event) {

				cityPicker3.show(function(items) {
					// console.log(items)
					// console.log(_getParam(items[0], 'value'))
					cityResult3.innerText =  _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
					doc.getElementById("provinceId").value=_getParam(items[0], 'value');
					doc.getElementById("cityId").value=_getParam(items[1], 'value');
					doc.getElementById("areaId").value=_getParam(items[2], 'value');

				});
			}, false);
		});
	})(mui, document);
</script>
</body>
</html>
